<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符:.self 只有自身才能触发</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>.Odiv1 {
        width: 280px;
        border: 1px red solid;
        padding: 15px;
    }

    .Odiv2 {
        width: 240px;
        border: 1px red solid;
        padding: 15px;
    }

    .Odiv3 {
        width: 200px;
        border: 1px red solid;
        padding: 15px;
    }
    </style>
    <script src="../vue.js"></script>
</head>
<body>
<h2>【例23】事件修饰符:.self 只有自身才能触发---传递冒泡但不触发本身的事件</h2>
<hr>
<div id="app">
    在控制台查看控制台输出(只有自身才能触发.self)：<br>
    <div class="Odiv1" v-on:click.self="doParent">a父 不接受子元素的冒泡 self
        <div class="Odiv2" v-on:click="doThis">b本
            <div class="Odiv3" v-on:click="doSon">d子</div>
        </div>
    </div>
    传递子元素的冒泡但不触发本身的事件.self：<br>
    <div class="Odiv1" v-on:click="doParent">c父
        <div class="Odiv2" v-on:click.self="doThis">d本:self 触发本身事件并向上冒泡
            <div class="Odiv3" v-on:click="doSon">d子</div>
        </div>
    </div>
    传递冒泡且触发事件(默认：无self)：<br>
    <div class="Odiv1" v-on:click="doParent">e父
        <div class="Odiv2" v-on:click="doThis">f本
            <div class="Odiv3" v-on:click="doSon">d子</div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            doParent() {
                console.log('我是父元素的单击事件')
            },
            doThis() {
                console.log('我是本元素的单击事件')
            },
            doSon() {
                console.log('我是子元素的单击事件')
            }
        }
    })
</script>
<hr>
<p><a href="index.html">返回章节目录</a>
    <script>document.write(document.lastModified); </script>
</p>
</body>
</html>
